<template>
  <div>
    <!-- 店铺简介 -->
    <div class="store-info">
      <div class="w clearfix">
        <div class="logo">
          <img :src="store.storeLogo" width="112" height="112">
        </div>
        <div class="zoom">
          <div class="content">
            <img class="store-icon" src="../../assets/images/icon-store.png" width="26" height="26">
            <p class="store-name">{{store.storeName}}</p>
            <span class="btn-follow" @click="followStore">
              <p v-if="!store.isAttention"><i class="icon el-icon-plus"></i>关注</p>
              <p v-else>取消关注</p>
            </span>
          </div>
        </div>
        <div class="desc" v-if="store.description.trim()">
          <div class="content">{{store.description}}</div>
        </div>
      </div>
    </div>
    <!-- 店铺 Banner -->
    <div class="banner-wrapper" v-if="store.bannerImg">
      <img :src="store.bannerImg">
    </div>
    <!-- 工具栏 -->
    <div class="tool-wrapper clearfix">
      <div class="btn-group">
        <div class="btn" :class="{'active': queryway == 1}" @click="setQueryWay(1)">
          <span class="text">综合</span>
        </div>
        <div class="btn" :class="{'active': queryway == 2}" @click="setQueryWay(2)">
          <span class="text">折扣</span>
          <i class="icon el-icon-caret-top" v-if="sortway === 'asc'"></i>
          <i class="icon el-icon-caret-bottom" v-if="sortway === 'desc'"></i>
        </div>
      </div>
    </div>
    <!-- 店铺商品 -->
    <div class="list-wrapper">
      <ul class="goods-list row">
        <li class="goods-item col-3" v-for="(item, index) in goodsList" :key="index">
          <router-link class="product-box" target="_blank" :to="'/goods/goodsDetail?productId=' + item.productId">
            <img :src="item.productCover" class="product-img" width="100%">
            <div class="product-info">
              <div class="sell">
                <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
                <span class="sell-price">
                  <em>¥</em>
                  <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                  <span v-else>?</span>
                  <i class="sell-type">/{{item.attributeName}}</i>
                </span>
                <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
              </div>
              <div class="name">{{item.productName}}</div>
              <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
              <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
              <div class="discounts clearfix" v-if="item.activityList">
                <div class="tag-group" v-if="item.activityList.isMore === '1'">
                  <span class="tag" v-for="(tag, index1) in item.activityList.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                </div>
                <div class="tag-group" v-else>
                  <span class="tag">{{item.activityList.activityName}}</span>
                </div>
              </div>
            </div>
            <div class="keywords">
              <span v-if="item.k1" class="w1">{{item.k1}}</span>
              <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
              <span v-if="item.k3" class="w3">{{item.k3}}</span>
            </div>
          </router-link>
        </li>
      </ul>
      <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
    </div>
  </div>
</template>

<script>
import vPagination from '@/components/public/pagination'
export default {
  data () {
    return {
      storeId: this.$route.query.storeId || '',
      brandId: this.$route.query.brandId || '',
      store: {},
      queryway: 1, // 搜索方式 {1: 综合； 2: 折扣；3:店铺}
      sortway: '', // 是否按折扣升序排列
      goodsList: [],
      page: this.$route.query.pg || 1,
      pageSize: 20,
      total: 0,
      loading: false
    }
  },
  components: {
    vPagination
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      this.getStoreData()
      this.getGoodsData()
    },
    // 切换商品排序方式
    setQueryWay (index) {
      if (index === 2) {
        switch (this.sortway) {
          case 'asc':
            this.sortway = 'desc'
            break
          case 'desc':
            this.sortway = ''
            break
          default:
            this.sortway = 'asc'
            break
        }
      }
      this.queryway = index
      if (index === 3) {
        this.getStoreList()
      } else {
        this.getGoodsData()
      }
    },
    // 获取店铺信息
    getStoreData () {
      return new Promise(resolve => {
        this.$http.post(this.$api + '/pc/customer/queryStoreById', {
          storeId: this.storeId
        }).then(res => {
          if (res.responseCode === '0000') {
            this.store = res.data
          }
        }).catch(err => {
          console.error(err)
        })
        return resolve()
      })
    },
    // 获取店铺商品
    getGoodsData () {
      this.$http.post(this.$api + '/pc/product/productList', {
        storeId: this.storeId,
        brandIds: this.brandId,
        discountSort: this.sortway,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.responseCode === '0000') {
          res.data.list.forEach(item => {
            if (item.keyWords) {
              let arr = item.keyWords.split(',')
              item.k1 = arr[0] || ''
              item.k2 = arr[1] || ''
              item.k3 = arr[2] || ''
            }
          })
          this.goodsList = res.data.list
          this.total = res.data.total
        }
      })
    },
    // （取消）关注店铺
    followStore () {
      if (this.$store.state.user.PCToken) {
        if (!this.loading) {
          this.loading = true
          this.$http.post(this.$api + '/pc/product/addOrDeleteStore', {
            storeId: this.storeId,
            type: this.store.isAttention ? 2 : 1 // 判断是否已关注，Type枚举：{1: 关注； 2: 取消关注}
          }).then(res => {
            if (res.responseCode === '0000') {
              this.getStoreData().then(() => {
                this.loading = false
              })
            } else {
              this.$message.error({
                duration: this.$store.state.duration,
                message: res.responseMsg
              })
              this.loading = false
            }
          }).catch(err => {
            console.error(err)
            this.loading = false
          })
        } else {
          return false
        }
      } else {
        this.$message.error({
          duration: this.$store.state.duration,
          message: '请先登录！',
          onClose: () => {
            this.$router.push('/login')
          }
        })
      }
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.store-info {
  width: 100%;
  height: 180px;
  background: url(../../assets/images/store-bg.png) center no-repeat;
  background-size: 100% 100%;
  .w {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    .logo {
      float: left;
      margin: 34px 0 34px 56px;
      width: 112px;
      height: 112px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    .zoom {
      position: relative;
      float: left;
      margin: 34px 38px 34px 0;
      width: 120px;
      height: 112px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background: #b28850;
        opacity: 0.7;
      }
      .content {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        padding-top: 15px;
        width: 100%;
        height: 100%;
        color: #ffffff;
        text-align: center;
        .store-icon {
          display: inline-block;
        }
        .store-name {
          padding-top: 12px;
          font-size: $fz_12;
        }
        .btn-follow {
          display: inline-block;
          margin-top: 8px;
          padding: 0 12px 0 8px;
          height: 20px;
          line-height: 20px;
          font-size: $fz_12;
          background: #887652;
          border-radius: 10px;
          cursor: pointer;
          .icon {
            margin-right: 2px;
            font-weight: bold;
          }
        }
      }
    }
    .desc {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      padding: 25px 30px;
      width: 874px;
      &::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        opacity: 0.5;
      }
      .content {
        z-index: 1;
        text-indent: 2em;
        font-size: $fz_12;
        color: #ffffff;
        line-height: 1.6;
      }
    }
  }
}
.banner-wrapper {
  margin: 30px auto 0;
  width: 1200px;
  height: 350px;
  img {
    width: 100%;
    height: 100%;
  }
}
.tool-wrapper {
  margin: 25px auto 30px;
  width: 1200px;
}
.list-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
}
</style>
